一、Grid 基础概念
概念：Grid 是二维布局的王牌，可以同时控制行和列。
容器：设置
项目：容器的直接子元素。
行：水平方向的轨道。
列：垂直方向的轨道。
单元格：行和列交叉形成的区域。
容器：设置
display: grid 的元素。项目：容器的直接子元素。
行：水平方向的轨道。
列：垂直方向的轨道。
单元格：行和列交叉形成的区域。
👇 最简单的 Grid 布局
1
2
3
4
5
6
1/* 容器设置 */
2.container {
3 display: grid;
4 grid-template-columns: 1fr 1fr 1fr;
5 gap: 10px;
6}
7
8/* fr 单位表示比例，1fr 1fr 1fr 表示三等分 */
二、grid-template-columns（定义列）
概念：
常用值：
grid-template-columns 定义网格的列数和列宽。常用值：
固定宽度 — 如 100px、200pxfr 比例 — 如 1fr 2fr 1frrepeat — 重复定义，如 repeat(3, 1fr)
👇 不同列定义方式
固定宽度
100px
150px
100px
fr 比例
1fr
2fr
1fr
repeat 重复
1
2
3
1/* 固定宽度 */
2.container {
3 grid-template-columns: 100px 150px 100px;
4}
5
6/* fr 比例 */
7.container {
8 grid-template-columns: 1fr 2fr 1fr;
9}
10
11/* repeat 重复 */
12.container {
13 grid-template-columns: repeat(3, 1fr);
14}
15
16/* auto-fit 自适应 */
17.container {
18 grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
19}
三、grid-template-rows（定义行）
概念：
常用值：
grid-template-rows 定义网格的行数和行高。常用值：
固定行高 — 如 60px、100pxauto — 自动根据内容调整fr — 比例分配
👇 不同行定义方式
固定行高
60px
60px
100px
100px
auto 自动
auto
auto
1fr
1fr
1/* 固定行高 */
2.container {
3 grid-template-rows: 60px 100px;
4}
5
6/* 自动行高 */
7.container {
8 grid-template-rows: auto;
9}
10
11/* 混合 */
12.container {
13 grid-template-rows: 100px auto 1fr;
14}
四、gap（间距）
概念：
语法：
常用场景：替代 margin，避免外边距合并问题。
gap 设置网格项目之间的间距。语法：
gap: 行间距 列间距;常用场景：替代 margin，避免外边距合并问题。
👇 gap 演示
1
2
3
4
5
6
1/* 统一间距 */
2.container {
3 gap: 20px;
4}
5
6/* 行列分别设置 */
7.container {
8 row-gap: 20px;
9 column-gap: 10px;
10}
五、跨列与跨行
概念：
语法：
常用场景：创建复杂的网格布局。
grid-column 和 grid-row 让项目跨越多个单元格。语法：
grid-column: span 2; — 跨 2 列常用场景：创建复杂的网格布局。
👇 跨列与跨行演示
跨2列
1
1
1
跨2行
1/* 跨列 */
2.item {
3 grid-column: span 2;
4}
5
6/* 跨行 */
7.item {
8 grid-row: span 2;
9}
10
11/* 指定列范围 */
12.item {
13 grid-column: 1 / 3; /* 从第1列到第3列 */
14}
六、grid-template-areas（区域布局）
概念：
语法：用字符串定义区域，相同名称的区域会合并。
常用场景：创建复杂的页面布局。
grid-template-areas 用命名区域定义布局，非常直观。语法：用字符串定义区域，相同名称的区域会合并。
常用场景：创建复杂的页面布局。
👇 区域布局演示
Header
Main
Aside
1/* 容器设置 */
2.container {
3 display: grid;
4 grid-template-columns: 1fr 2fr 1fr;
5 grid-template-rows: 60px 1fr 60px;
6 grid-template-areas:
7 "header header header"
8 "sidebar main aside"
9 "footer footer footer";
10}
11
12/* 项目设置 */
13.header { grid-area: header; }
14.sidebar { grid-area: sidebar; }
15.main { grid-area: main; }
16.aside { grid-area: aside; }
17.footer { grid-area: footer; }
七、justify-items（水平对齐）
概念：
常用值：
justify-items 控制项目在单元格内的水平对齐方式。常用值：
stretch — 拉伸（默认）start — 左对齐center — 居中end — 右对齐
👇 justify-items 对比
start
1
2
3
center
1
2
3
1/* 左对齐 */
2.container {
3 justify-items: start;
4}
5
6/* 居中 */
7.container {
8 justify-items: center;
9}
10
11/* 右对齐 */
12.container {
13 justify-items: end;
14}
八、align-items（垂直对齐）
概念：
常用值：
align-items 控制项目在单元格内的垂直对齐方式。常用值：
stretch — 拉伸（默认）start — 顶部对齐center — 居中end — 底部对齐
👇 align-items 对比
start
1
2
3
center
1
2
3
1/* 顶部对齐 */
2.container {
3 align-items: start;
4}
5
6/* 居中 */
7.container {
8 align-items: center;
9}
10
11/* 底部对齐 */
12.container {
13 align-items: end;
14}
九、justify-content（整体水平对齐）
概念：
前提：网格总宽度小于容器宽度。
常用值：
justify-content 控制整个网格在容器内的水平对齐方式。前提：网格总宽度小于容器宽度。
常用值：
start、center、space-between
👇 justify-content 对比
center
1
2
3
space-between
1
2
3
1/* 居中 */
2.container {
3 justify-content: center;
4}
5
6/* 两端对齐 */
7.container {
8 justify-content: space-between;
9}
十、align-content（整体垂直对齐）
概念：
前提：网格总高度小于容器高度。
常用值：
align-content 控制整个网格在容器内的垂直对齐方式。前提：网格总高度小于容器高度。
常用值：
start、center、end
👇 align-content 演示
1
2
3
4
5
6
1/* 垂直居中 */
2.container {
3 display: grid;
4 grid-template-columns: repeat(3, 1fr);
5 grid-template-rows: repeat(3, 1fr);
6 align-content: center;
7 height: 300px;
8}
十一、grid-auto-flow（自动排列）
概念：
常用值：
grid-auto-flow 控制项目如何自动排列。常用值：
row — 按行排列（默认）column — 按列排列dense — 填充空隙
👇 grid-auto-flow 对比
row（默认）
1
2
3
4
5
column
1
2
3
4
5
1/* 按行排列（默认） */
2.container {
3 grid-auto-flow: row;
4}
5
6/* 按列排列 */
7.container {
8 grid-auto-flow: column;
9}
10
11/* 填充空隙 */
12.container {
13 grid-auto-flow: dense;
14}
十二、minmax（最小最大值）
概念：
语法：
常用场景：创建响应式布局，项目在一定范围内伸缩。
minmax() 定义项目的最小和最大尺寸。语法：
minmax(最小值, 最大值)常用场景：创建响应式布局，项目在一定范围内伸缩。
👇 minmax 演示
1
2
3
4
5
6
1/* 最小100px，最大1fr */
2.container {
3 grid-template-columns: repeat(3, minmax(100px, 1fr));
4}
十三、auto-fit（自适应列数）
概念：
语法：
常用场景：卡片布局、图片画廊等。
auto-fit 配合 minmax() 实现完全响应式布局。语法：
repeat(auto-fit, minmax(最小宽度, 1fr))常用场景：卡片布局、图片画廊等。
👇 auto-fit 演示（调整窗口宽度查看效果）
1
2
3
4
5
6
1/* 自适应列数 */
2.container {
3 display: grid;
4 grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
5 gap: 10px;
6}
7
8/* auto-fit vs auto-fill：
9 auto-fit: 项目拉伸填满空隙
10 auto-fill: 保持项目原始尺寸 */